<template>
  <div class="expert-detail-page">
    <front-header />
    <div class="detail-card">
      <div class="header">
        <el-image 
          :src="getImageUrl(expert.avatar)"
          class="avatar" 
          fit="cover"
          :preview-src-list="[expert.avatar]"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-user-solid"></i>
          </div>
        </el-image>
        <div class="main-info">
          <h1 class="name">{{ expert.name }}</h1>
          <div class="title">{{ expert.title }}</div>
          <div class="field">{{ expert.field }}</div>
        </div>
      </div>
      <el-divider />
      <div class="desc-group">
        <div class="desc-item"><b>简介：</b>{{ expert.description }}</div>
        <div class="desc-item"><b>联系方式：</b>{{ expert.phone }} / {{ expert.email }}</div>
      </div>
      <div class="btn-row">
        <el-button type="success" @click="goAppointment">预约该专家</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>
    <front-footer />
  </div>
</template>
<script>
import { getExpertDetail } from '@/api/ExpertController';
import FrontHeader from "@/components/front/FrontHeader.vue";
import FrontFooter from "@/components/front/FrontFooter.vue";
export default {
  components: {FrontFooter, FrontHeader},
  data() {
    return {
      expert: null
    };
  },
  methods: {
    goAppointment() {
      this.$router.push({ name: 'ExpertAppointment', params: { expertId: this.$route.params.expertId } });
    },
    goBack() {
      this.$router.back();
    },
    getImageUrl(url) {
      if (!url) return ''
      return url.startsWith('/api') ? url : `/api${url}`
    },
    async loadExpert() {
      const response = await getExpertDetail(this.$route.params.expertId);
      const res = response.expert;
      this.expert = Array.isArray(res) ? res[0] : res;
    }
  },
  mounted() {
    this.loadExpert();
  }
};
</script>
<style scoped>
.expert-detail-page {
  padding: 32px 24px;
  background: #f9f9f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #333333;
  max-height: 100%;
  overflow: auto;
}

.detail-card {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 32px 40px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #eaeaea;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border: 2px solid #4caf50;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #4caf50;
  font-size: 40px;
}

.name {
  font-size: 28px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.title {
  color: #4caf50;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 500;
}

.field {
  color: #666666;
  font-size: 16px;
}

.el-divider {
  background-color: #eaeaea;
  margin: 24px 0;
}

.desc-group {
  margin-top: 20px;
  line-height: 1.8;
  font-size: 16px;
}

.desc-item {
  margin-bottom: 16px;
}

.desc-item b {
  color: #333333;
  font-weight: 600;
  margin-right: 8px;
}

.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}

.btn-row .el-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-row .el-button--success {
  background: linear-gradient(90deg, #4caf50 0%, #81c784 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-row .el-button--success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
  background: linear-gradient(90deg, #3b9c3f 0%, #6ebb71 100%);
}

.btn-row .el-button--default {
  border-color: #4caf50;
  color: #4caf50;
  background: transparent;
}

.btn-row .el-button--default:hover {
  color: #ffffff;
  background: rgba(76, 175, 80, 0.1);
  border-color: #4caf50;
}

@media (max-width: 768px) {
  .detail-card {
    padding: 24px 20px;
  }
  
  .header {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .btn-row {
    flex-direction: column;
  }
  
  .btn-row .el-button {
    width: 100%;
  }
}
</style>